<template>
  <div class="show">
    <div class="box">
      <!--快捷 导航到 色块-->
      <!-- 整体旋转     -->
        <div ref="three"
             :style="{transform:comXYZA}"
        ></div>
    </div>
    <div>
      rotateX:<input type="number" v-model="x"><br/>
      rotateY:<input type="number" v-model="y"><br/>
      rotateZ:<input type="number" v-model="z"><br/>
    </div>
    <div>
      <input type="range" v-model="rtdx" min="-20" max="20">x:{{rtdx}}
      <input type="range" v-model="rtdy" min="-20" max="20">y:{{rtdy}}
      <input type="range" v-model="rtdz" min="-20" max="20"> z:{{rtdz}}
      <input type="range" v-model="rtda" min="-720" max="720">a:{{rtda}}
      <button @click="fnMove">start</button>
    </div>
    <div>
      x.speed:{{sx}}
      <input type="number" v-model="sx">
      <button @click="speedAdd('sx',1)">+</button>
      <button @click="speedAdd('sx',-1)">-</button><br/>
      y.speed:{{sy}}
      <input type="number" v-model="sy">
      <button @click="speedAdd('sy',1)">+</button>
      <button @click="speedAdd('sy',-1)">-</button><br/>
      z.speed:{{sz}}
      <input type="number" v-model="sz">
      <button @click="speedAdd('sz',1)">+</button>
      <button @click="speedAdd('sz',-1)">-</button><br/>
      <button @click="startMove">start</button>
      <button @click="stop">stop</button>
    </div>
    <div class="control">
      <button @click="top">上</button>
      <button @click="bottom">下</button>
      <button @click="left">左</button>
      <button @click="right">右</button>
    </div>
    <div>
      <button v-for="(item,index) in away"
              v-bind:key="index"
              @click="setTsfa(index)"
              style="width: 50px"
      >{{index}}</button>
    </div>
  </div>
</template>

<script>
  import MakeTh from './three'
  export default {
    name: "Three",
    data(){
      return {
        rtdx:0,
        rtdy:0,
        rtdz:0,
        rtda:0,
        x:0,
        y:0,
        z:0,
        sx:1,
        sy:0,
        sz:0,
        isGo:true,
        canDo:true,
        xzqk:0,
        away:[
          [0,0,0],
          [0,0,90],
          [0,0,180],
          [0,0,270],

          //4
          [0,90,0],
          [0,90,90],//5
          [0,90,180],
          [0,90,270],

          //8
          [0,180,0],
          [0,180,90],
          [0,180,180],
          [0,180,270],

          //12
          [0,270,0],
          [0,270,90],
          [0,270,180],
          [0,270,270],

          //----------------------16
          [90,0,0],//16
          [90,0,90],
          [90,0,180],
          [90,0,270],

          [270,0,0],
          [270,0,90],
          [270,0,180],
          [270,0,270],
        ],
        sameArr:[
        ]
      }
    },
    computed:{
      comXYZA(){
        return `rotate3d(${this.rtdx},${this.rtdy},${this.rtdz},${this.rtda}deg)`
      }
    },
    methods:{
      fnMove(){
        this.rtdz=1+Math.floor(this.rtdz);
        this.rtda-=20;
      },
      setTsfa(num){

        this.x=this.away[num][0];
        this.y=this.away[num][1];
        this.z=this.away[num][2];
        this.$refs.three.style.transform=`rotateX(${this.x}deg)
                                          rotateY(${this.y}deg)
                                          rotateZ(${this.z}deg)
                                          `;
      },
      setTsf(x,y,z,num){
        clearInterval(this.timer);
        this.x+=x;
        this.y+=y;
        this.z+=z;
        this.$refs.three.style.transform=`rotateX(${this.x}deg)
                                          rotateY(${this.y}deg)
                                          rotateZ(${this.z}deg)
                                          `;
        let vm=this
        this.timer=setTimeout(function () {
         vm.$refs.three.style.transition='0s';
         vm.setTsfa(num)
          vm.canDo=true
          setTimeout(function () {
            vm.$refs.three.style.transition='all .3s';
          },10)
        },300)
      },
      zTop(){
        if(!this.canDo) return
        this.canDo=false
        switch (this.xzqk) {
          case 0:this.setTsf(0,0,-90,16);this.xzqk=16;break;
          case 1:this.setTsf(0,0,-90,17);this.xzqk=17;break;
          case 2:this.setTsf(0,0,-90,18);this.xzqk=18;break;
          case 3:this.setTsf(0,0,-90,19);this.xzqk=19;break;
          case 4:this.setTsf(0,0,0,5);this.xzqk=5;break;
          case 5:this.setTsf(0,0,0,6);this.xzqk=6;break;
          case 6:this.setTsf(0,0,0,7);this.xzqk=7;break;
          case 7:this.setTsf(0,0,0,4);this.xzqk=4;break;

          case 8:this.setTsf(90,0,0,22);this.xzqk=22;break;
          case 9:this.setTsf(90,0,0,23);this.xzqk=23;break;
          case 10:this.setTsf(90,0,0,20);this.xzqk=20;break;
          case 11:this.setTsf(90,0,0,21);this.xzqk=21;break;

          case 12:this.setTsf(90,0,0,15);this.xzqk=15;break;
          case 13:this.setTsf(90,0,0,12);this.xzqk=12;break;
          case 14:this.setTsf(90,0,0,13);this.xzqk=13;break;
          case 15:this.setTsf(90,0,0,14);this.xzqk=14;break;

          case 16:this.setTsf(90,0,0,10);this.xzqk=10;break;
          case 17:this.setTsf(90,0,0,11);this.xzqk=11;break;
          case 18:this.setTsf(90,0,0,8);this.xzqk=8;break;
          case 19:this.setTsf(90,0,0,9);this.xzqk=9;break;
          case 20:this.setTsf(90,0,0,0);this.xzqk=0;break;
          case 21:this.setTsf(90,0,0,1);this.xzqk=1;break;
          case 22:this.setTsf(90,0,0,2);this.xzqk=2;break;
          case 23:this.setTsf(90,0,0,3);this.xzqk=3;break;
        }
      },
      zBot(){

      },
      top(){
        if(!this.canDo) return
        this.canDo=false
        switch (this.xzqk) {
          case 0:this.setTsf(90,0,0,16);this.xzqk=16;break;
          case 1:this.setTsf(90,0,0,17);this.xzqk=17;break;
          case 2:this.setTsf(90,0,0,18);this.xzqk=18;break;
          case 3:this.setTsf(90,0,0,19);this.xzqk=19;break;
          case 4:this.setTsf(0,0,90,5);this.xzqk=5;break;
          case 5:this.setTsf(0,0,90,6);this.xzqk=6;break;
          case 6:this.setTsf(0,0,90,7);this.xzqk=7;break;
          case 7:this.setTsf(0,0,90,4);this.xzqk=4;break;

          case 8:this.setTsf(90,0,0,22);this.xzqk=22;break;
          case 9:this.setTsf(90,0,0,23);this.xzqk=23;break;
          case 10:this.setTsf(90,0,0,20);this.xzqk=20;break;
          case 11:this.setTsf(90,0,0,21);this.xzqk=21;break;

          case 12:this.setTsf(90,0,0,15);this.xzqk=15;break;
          case 13:this.setTsf(90,0,0,12);this.xzqk=12;break;
          case 14:this.setTsf(90,0,0,13);this.xzqk=13;break;
          case 15:this.setTsf(90,0,0,14);this.xzqk=14;break;

          case 16:this.setTsf(90,0,0,10);this.xzqk=10;break;
          case 17:this.setTsf(90,0,0,11);this.xzqk=11;break;
          case 18:this.setTsf(90,0,0,8);this.xzqk=8;break;
          case 19:this.setTsf(90,0,0,9);this.xzqk=9;break;
          case 20:this.setTsf(90,0,0,0);this.xzqk=0;break;
          case 21:this.setTsf(90,0,0,1);this.xzqk=1;break;
          case 22:this.setTsf(90,0,0,2);this.xzqk=2;break;
          case 23:this.setTsf(90,0,0,3);this.xzqk=3;break;
        }
      },
      bottom(){
        if(!this.canDo) return
        this.canDo=false
        switch (this.xzqk) {
          case 0:this.setTsf(-90,0,0,20);this.xzqk=20;break;
          case 1:this.setTsf(-90,0,0,21);this.xzqk=21;break;
          case 2:this.setTsf(-90,0,0,22);this.xzqk=22;break;
          case 3:this.setTsf(-90,0,0,23);this.xzqk=23;break;
          case 4:this.setTsf(0,0,-90,7);this.xzqk=7;break;
          case 5:this.setTsf(0,0,-90,4);this.xzqk=4;break;
          case 6:this.setTsf(0,0,-90,5);this.xzqk=5;break;
          case 7:this.setTsf(0,0,-90,6);this.xzqk=6;break;

          case 8:this.setTsf(-90,0,0,18);this.xzqk=18;break;
          case 9:this.setTsf(-90,0,0,19);this.xzqk=19;break;
          case 10:this.setTsf(-90,0,0,16);this.xzqk=16;break;
          case 11:this.setTsf(-90,0,0,17);this.xzqk=17;break;

          case 12:this.setTsf(-90,0,0,13);this.xzqk=13;break;
          case 13:this.setTsf(-90,0,0,14);this.xzqk=14;break;
          case 14:this.setTsf(-90,0,0,15);this.xzqk=15;break;
          case 15:this.setTsf(-90,0,0,12);this.xzqk=12;break;

          case 16:this.setTsf(-90,0,0,0);this.xzqk=0;break;
          case 17:this.setTsf(-90,0,0,1);this.xzqk=1;break;
          case 18:this.setTsf(-90,0,0,2);this.xzqk=2;break;
          case 19:this.setTsf(-90,0,0,3);this.xzqk=3;break;
          case 20:this.setTsf(-90,0,0,10);this.xzqk=10;break;
          case 21:this.setTsf(-90,0,0,11);this.xzqk=11;break;
          case 22:this.setTsf(-90,0,0,8);this.xzqk=8;break;
          case 23:this.setTsf(-90,0,0,9);this.xzqk=9;break;
        }
      },
      right(){
        if(!this.canDo) return
        this.canDo=false
        switch (this.xzqk) {
          case 0:this.setTsf(0,90,0,4);this.xzqk=4;break;
          case 1:this.setTsf(0,90,0,5);this.xzqk=5;break;
          case 2:this.setTsf(0,90,0,6);this.xzqk=6;break;
          case 3:this.setTsf(0,90,0,7);this.xzqk=7;break;
          case 4:this.setTsf(0,90,0,8);this.xzqk=8;break;
          case 5:this.setTsf(0,90,0,9);this.xzqk=9;break;
          case 6:this.setTsf(0,90,0,10);this.xzqk=10;break;
          case 7:this.setTsf(0,90,0,11);this.xzqk=11;break;

          case 8:this.setTsf(0,90,0,12);this.xzqk=12;break;
          case 9:this.setTsf(0,90,0,13);this.xzqk=13;break;
          case 10:this.setTsf(0,90,0,14);this.xzqk=14;break;
          case 11:this.setTsf(0,90,0,15);this.xzqk=15;break;

          case 12:this.setTsf(0,90,0,0);this.xzqk=0;break;
          case 13:this.setTsf(0,90,0,1);this.xzqk=1;break;
          case 14:this.setTsf(0,90,0,2);this.xzqk=2;break;
          case 15:this.setTsf(0,90,0,3);this.xzqk=3;break;

          case 16:this.setTsf(0,0,-90,19);this.xzqk=19;break;
          case 17:this.setTsf(0,0,-90,16);this.xzqk=16;break;
          case 18:this.setTsf(0,0,-90,17);this.xzqk=17;break;
          case 19:this.setTsf(0,0,-90,18);this.xzqk=18;break;
          case 20:this.setTsf(0,0,90,21);this.xzqk=21;break;
          case 21:this.setTsf(0,0,90,22);this.xzqk=22;break;
          case 22:this.setTsf(0,0,90,23);this.xzqk=23;break;
          case 23:this.setTsf(0,0,90,20);this.xzqk=20;break;
        }
      },
      left(){
        if(!this.canDo) return
        this.canDo=false
        switch (this.xzqk) {
          case 0:this.setTsf(0,-90,0,12);this.xzqk=12;break;
          case 1:this.setTsf(0,-90,0,13);this.xzqk=13;break;
          case 2:this.setTsf(0,-90,0,14);this.xzqk=14;break;
          case 3:this.setTsf(0,-90,0,15);this.xzqk=15;break;
          case 4:this.setTsf(0,-90,0,0);this.xzqk=0;break;
          case 5:this.setTsf(0,-90,0,1);this.xzqk=1;break;
          case 6:this.setTsf(0,-90,0,2);this.xzqk=2;break;
          case 7:this.setTsf(0,-90,0,3);this.xzqk=3;break;

          case 8:this.setTsf(0,-90,0,4);this.xzqk=4;break;
          case 9:this.setTsf(0,-90,0,5);this.xzqk=5;break;
          case 10:this.setTsf(0,-90,0,6);this.xzqk=6;break;
          case 11:this.setTsf(0,-90,0,7);this.xzqk=7;break;

          case 12:this.setTsf(0,-90,0,8);this.xzqk=8;break;
          case 13:this.setTsf(0,-90,0,9);this.xzqk=9;break;
          case 14:this.setTsf(0,-90,0,10);this.xzqk=10;break;
          case 15:this.setTsf(0,-90,0,11);this.xzqk=11;break;

          case 16:this.setTsf(0,0,90,17);this.xzqk=17;break;
          case 17:this.setTsf(0,0,90,18);this.xzqk=18;break;
          case 18:this.setTsf(0,0,90,19);this.xzqk=19;break;
          case 19:this.setTsf(0,0,90,16);this.xzqk=16;break;
          case 20:this.setTsf(0,0,-90,23);this.xzqk=23;break;
          case 21:this.setTsf(0,0,-90,20);this.xzqk=20;break;
          case 22:this.setTsf(0,0,-90,21);this.xzqk=21;break;
          case 23:this.setTsf(0,0,-90,22);this.xzqk=22;break;
        }
      },
      startMove(){
        clearInterval(this.timer);
        this.timer=setInterval(()=>{
          this.x=Math.floor(this.x)+Math.floor(this.sx);
          this.y=Math.floor(this.y)+Math.floor(this.sy);
          this.z=Math.floor(this.z)+Math.floor(this.sz);
          this.$refs.three.style.transform=`rotateX(${this.x}deg)
                                            rotateY(${this.y}deg)
                                            rotateZ(${this.z}deg)
                                            `;
        },1000/80);
        this.isGo=true;
      },
      stop(){
        clearInterval(this.timer);
        this.isGo=false;
      },
      speedAdd(obj,num){
        this[obj]=Math.floor(this[obj])+Math.floor(num);
      }
    },
    mounted() {
      new MakeTh(this.$refs.three);
      //   this.startMove();
    },
    deactivated(){
      // let a=this.isGo;
      // this.stop();
      // a?this.isGo=true:'';
    },
    activated(){
      // this.isGo?this.startMove():'';
    }
  }
</script>

<style scoped>

  .box{

    perspective: 1001px;
    position: relative;
    width: 100px;
    height: 100px;
    margin:100px auto;
    transform-style:preserve-3d;
    transform: rotateX(-20deg) rotateY(-20deg);
    z-index: -100;
  }
  .control{
    position: absolute;
    top: 400px;
    left: 500px;
  }
  .control button{
    margin-left: 10px;
    width: 70px;
    height: 35px;
  }
  .show{

  }
</style>
